import 'package:flutter/material.dart';
import '../../../services/number_utils.dart';
import '../view/areacode_pick.dart';
import '../../../l10n/app_localizations.dart';

class MobileTextField extends StatefulWidget {
  final String hintText;
  final TextEditingController? controller;
  final ValueChanged<String>? onChanged;
  final ValueChanged<String>? onCodeValueChanged;
  final VoidCallback? onFocusLost;
  final bool enabled;
  final List<String>? autofillHints;

  const MobileTextField({
    super.key,
    required this.hintText,
    this.controller,
    this.onChanged,
    this.onCodeValueChanged,
    this.onFocusLost, 
    this.autofillHints,
    this.enabled = true,

  });

  @override
  State<MobileTextField> createState() => _MobileTextFieldState();
}

class _MobileTextFieldState extends State<MobileTextField> {
  late TextEditingController _controller;
  late FocusNode _focusNode;
  var areaCodeNew = '+1';

  @override
  void initState() {
    super.initState();
    _controller = widget.controller ?? TextEditingController();
    _focusNode = FocusNode();
    _focusNode.addListener(() {
      if (!_focusNode.hasFocus && widget.onFocusLost != null) {
        widget.onFocusLost!();
      }
    });
    _controller.addListener(() {
      setState(() {});
    });

    loadGetAreaCode();
  }

  void loadGetAreaCode() async {
    var areaCode = await NumberUtils.getAreaCode();
    var parts = areaCode.split(' ');
    var code = parts.length > 1 ? parts[1] : areaCode;

    setState(() {
        areaCodeNew = code;
        widget.onCodeValueChanged!(areaCode);
    });
  }

  @override
  void dispose() {
    _focusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 48,
      decoration: BoxDecoration(
        color: Colors.white,
        border: Border.all(color: Color(0xFFD2D2D2), width: 1),
        borderRadius: BorderRadius.circular(22),
      ),
      child: Row(
        children: [
          GestureDetector(
            onTap: () {
              if (!widget.enabled) return;
              showModalBottomSheet(
                context: context,
                isScrollControlled: true,
                builder: (context) => SingleChildScrollView(
                  child: Container(
                    padding: EdgeInsets.only(
                      bottom: MediaQuery.of(context).viewInsets.bottom,
                    ),
                    child: AreaCodePickView(onAreaCodeSelected: (p0) {   
                      setState(() {
                        areaCodeNew = p0.name;
                        if (widget.onCodeValueChanged != null) {
                          widget.onCodeValueChanged!(p0.label);
                        }
                      });
                    },),
                  ),
                ),
              ).then((value) {});
            },
            child: Container(
              width: 81,
              padding: EdgeInsets.only(right: 10),
              alignment: Alignment.center,
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text(
                    areaCodeNew,
                    style: TextStyle(color: Color(0xFF222222)),
                  ),
                  SizedBox(width: 4),
                  Image.asset(
                    'assets/images/展开.png',
                    width: 12,
                    height: 12,
                  ),
                ],
              ),
            ),
          ),
          Container(
            width: 1,
            height: 30,
            color: Color(0xFFD2D2D2),
          ),
          Expanded(
            child: TextField(
              enabled: widget.enabled,
              autofillHints: widget.autofillHints,
              controller: _controller,
              onChanged: widget.onChanged,
              focusNode: _focusNode,
              decoration: InputDecoration(
                contentPadding: EdgeInsets.symmetric(horizontal: 20, vertical: 12),
                hintText: widget.hintText,
                hintStyle: TextStyle(color: Color(0xFFB2B2B2)),
                filled: true,
                fillColor: Colors.white,
                border: UnderlineInputBorder(
                  borderRadius: BorderRadius.circular(22),
                  borderSide: BorderSide.none,
                ),
                suffixIcon: _controller.text.isNotEmpty && widget.enabled
                    ? IconButton(
                        padding: EdgeInsets.zero,
                        icon: Image.asset(
                          'assets/images/close1.png',
                          width: 20,
                          height: 20,
                        ),
                        onPressed: () {
                          _controller.clear();
                          setState(() {});
                        },
                      )
                    : null,
              ),
              style: TextStyle(color: Color(0xFF222222),fontSize: isChineseLocale() ? 14 : 13),
            ),
          ),
        ],
      ),
    );
  }
}